<!-- template inhertance -->
<extend name="layout/layui24"/>

<!-- styles -->
<block name="linkcss">
    <!--日期-->
    <link rel="stylesheet" href="/Public/home/css/bootstrap-datetimepicker.min.css">
    <!--流程步骤条-->
    <link rel="stylesheet" href="/Public/home/css/process.css">
    <!--  物流信息查询api  -->
    <link rel="stylesheet" href="/Public/KDNWidget/KDNWidget.css">
    <!--layui第三方多选组件-->
    <link rel="stylesheet" href="/Public/layui-formSelects/dist/formSelects-v4.css">

    <link rel="stylesheet" href="/Public/home/css/samples/show.css">
</block>

<!-- scripts -->
<block name="linkjs">
    <!--日期-->
    <script src="/Public/home/js/bootstrap-datetimepicker.js"></script>
    <script src="/Public/home/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <!--  物流信息查询api  -->
    <script src="/Public/KDNWidget/KDNWidget.js"></script>

    <script src="/Public/home/js/samples/show.js"></script>
</block>

<!-- page title -->
<block name="webtitle">
    <title>样品订单详情</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
        <li><a href="index">样品管理</a></li>
        <li><a href="overview">订单总览</a></li>
        <li class="active">订单详情</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
    <!--  头部  -->
    <div class="samples-header">
        <div class="samples-row">
            <span>{$product.product_model}</span>
            <lt name="product.product_progress.progress_value" value="10">
                <small class="tag">{$product.product_progress.progress_label}</small>
                <else/>
                <small class="tag tag-success">{$product.product_progress.progress_label}</small>
            </lt>
        </div>
    </div>

    <!--  按钮组  -->
    <div class="samples-toolbar mt-10">
        <!--  流程操作  -->
        <if condition="$ccList">
            <button type="button" class="btn btn-sm btn-default" id="operate">
                <i class="icon-comment-alt"></i>
                操作
            </button>
            <else/>
            <button type="button" class="btn btn-sm btn-default" disabled>
                <i class="icon-comment-alt"></i>
                操作
            </button>
        </if>
    </div>

    <!--  内容  -->
    <div class="samples-content">
        <div class="layui-tab layui-tab-brief" lay-filter="tab">
            <ul class="layui-tab-title">
                <li class="layui-this" lay-id="cover">封面</li>
                <li lay-id="progress">工作流程</li>
                <li lay-id="logistics">物流</li>
                <li lay-id="log">操作日志</li>
                <li lay-id="report">测试报告</li>
            </ul>
            <div class="layui-tab-content">

                <!-- 封面 -->
                <div class="layui-tab-item layui-show">
                    <table class="cover-table">
                        <colgroup>
                            <col width="120">
                            <col>
                        </colgroup>
                        <tbody>
                            <tr>
                                <td>订单号：</td>
                                <td>
                                    <a href="/Samples/overview?id={$product.sample_id}">{$product.sample_order}</a>
                                </td>
                            </tr>
                            <tr>
                                <td>产品类型：</td>
                                <td>{$product.product_type}</td>
                            </tr>
                            <tr>
                                <td>产品型号：</td>
                                <td>{$product.product_model}</td>
                            </tr>
                            <tr>
                                <td>产品经理：</td>
                                <td>{$product.manager_name}</td>
                            </tr>
                            <tr>
                                <td>模块数量：</td>
                                <td>{$product.count}</td>
                            </tr>
                            <tr>
                                <td>客户名称：</td>
                                <td>{$product.customer}</td>
                            </tr>
                            <tr>
                                <td>设备品牌：</td>
                                <td>{$product.brand}</td>
                            </tr>
                            <tr>
                                <td>设备型号：</td>
                                <td>{$product.model}</td>
                            </tr>
                            <tr>
                                <td>备注：</td>
                                <td>{$product.remark|nl2br}</td>
                            </tr>
                            <tr>
                                <td>要求交期：</td>
                                <td>{$product.request_delivery|date="Y-m-d",###}</td>
                            </tr>
                            <tr>
                                <td>预计交期：</td>
                                <td>
                                    <notempty name="product.expected_delivery">
                                        {$product.expected_delivery|date="Y-m-d",###}
                                    </notempty>
                                </td>
                            </tr>
                            <tr>
                                <td>实际交期：</td>
                                <td>
                                    <notempty name="product.actual_delivery">
                                        {$product.actual_delivery|date="Y-m-d",###}
                                        <if condition="$product['is_delay'] eq 1">
                                            <span class="tag tag-danger">延期</span>
                                            <else/>
                                            <span class="tag tag-success">正常</span>
                                        </if>
                                    </notempty>
                                </td>
                            </tr>
                            <tr>
                                <td>当前进度：</td>
                                <td>
                                    <if condition="$product['product_progress']['progress_value'] lt 10">
                                        <span class="tag">{$product.product_progress.progress_label}</span>
                                        <elseif condition="$product['product_progress']['progress_value'] eq 12"/> {//若已拒绝需显示进度为已拒绝}
                                        <span class="tag tag-danger">已拒绝</span>
                                        <else/>
                                        <span class="tag tag-success">{$product.product_progress.progress_label}</span>
                                    </if>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 工作流程 -->
                <div class="layui-tab-item">
                    <!-- 流程条 -->
                    <div class="process">
                        <volist name="progress" id="vo">
                            {//还没有到该流程步骤}
                            <eq name="vo.step_status" value="0">
                                <div class="process-item">
                            </eq>
                            {//已通过}
                            <eq name="vo.step_status" value="1">
                                <div class="process-item active">
                            </eq>
                            {//当前该流程步骤正在执行中}
                            <eq name="vo.step_status" value="2">
                                <div class="process-item current">
                            </eq>
                            {//已拒绝}
                            <eq name="vo.step_status" value="3">
                                <div class="process-item error">
                            </eq>
                            <div class="process-title">
                                <a href="" data-id="step{$vo.step_id}">{$vo.step_name}</a>
                            </div>
                            <div class="process-step">
                                <eq name="vo.step_status" value="1">
                                    <i class="icon-ok"></i>
                                    <else/>
                                    <eq name="vo.step_status" value="3">
                                        <i class="icon-remove"></i>
                                        <else/>
                                        {$vo.step_id}
                                    </eq>
                                </eq>
                                <div class="process-hollow"></div>
                            </div>
                            {//如果是已通过，显示提示信息已通过}
                            <eq name="vo.step_status" value="1">
                                <div class="process-info">已通过已通过已通过已通过已通过</div>
                            </eq>
                            {//如果是正在执行中，显示提示信息等待中...}
                            <eq name="vo.step_status" value="2">
                                <div class="process-info">等待中...</div>
                            </eq>
                            {//如果是已拒绝，显示提示信息已拒绝}
                            <eq name="vo.step_status" value="3">
                                <div class="process-info">已拒绝</div>
                            </eq>
                            </div>
                        </volist>
                    </div>

                    <!-- 每一步具体内容 -->
                    <div>
                        <volist name="progress" id="vo">
                            <div class="step-content" id="step{$vo.step_id}">
                                <div class="step-title">Step{$vo.step_id}-{$vo.step_name}</div>
                                <div class="step-body">
                                    <switch name="vo.step_status">
                                        {//还没有到该流程步骤}
                                        <case value="0">

                                        </case>
                                        {//当前正在执行}
                                        <case value="2">
                                            <div class="text-muted">没有记录</div>
                                            <div class="waiting">
                                                <i class="icon-time"></i>
                                                等待
                                                <volist name="vo.step_info" id="item">
                                                    {$item.name}&nbsp;
                                                </volist>
                                                处理中...
                                            </div>
                                        </case>
                                        {//已处理（通过或拒绝）则循环显示处理人处理日志信息}
                                        <default/>
                                        <volist name="vo.step_info" id="item">
                                            <div class="step-body-item">
                                                <div class="face">
                                                    <img src="{$item.face}" alt="头像" class="layui-circle" width="40" height="40">
                                                </div>
                                                <div>
                                                    <div class="text-muted">
                                                        <small>{$item.name}</small>
                                                        <small>发布于</small>
                                                        <small>{$item.time|date="Y-m-d H:i:s",###}</small>
                                                    </div>
                                                    <div class="mt-5 mb-5">{$item.view|nl2br}</div>
                                                </div>
                                            </div>
                                        </volist>
                                    </switch>
                                </div>
                            </div>
                        </volist>
                    </div>
                </div>

                <!-- 物流 -->
                <div class="layui-tab-item">
                    <notempty name="logistics">
                        <table class="cover-table">
                            <colgroup>
                                <col width="120">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>物流公司：</td>
                                <td>{$logistics.company}</td>
                            </tr>
                            <tr>
                                <td>物流单号：</td>
                                <td>{$logistics.order}</td>
                            </tr>
                            <tr>
                                <td>运单创建人：</td>
                                <td>{$logistics.create_user}</td>
                            </tr>
                            <tr>
                                <td>运单创建时间：</td>
                                <td>{$logistics.create_time|date="Y-m-d H:i:s",###}</td>
                            </tr>
                            <tr>
                                <td>物流状态：</td>
                                <td>
                                    <div id="logistics_status"></div>
                                    <script>
                                        window.onload = function () {
                                            KDNWidget.run({
                                                serviceType: "B",
                                                expCode:"{$logistics.company_order}",
                                                expNo:"{$logistics.order}",
                                                showType:"normal",
                                                container: "logistics_status"
                                            });
                                        }
                                    </script>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <else/>
                        <div class="no-info"></div>
                    </notempty>
                </div>

                <!-- 操作日志 -->
                <div class="layui-tab-item">
                    <notempty name="log">
                        <ul class="layui-timeline">
                            <!-- foreach start 循环日志某人在某个步骤做了什么操作-->
                            <volist name="log" id="vo">
                                <li class="layui-timeline-item">
                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                    <div class="layui-timeline-content layui-text">
                                        <div class="layui-timeline-title">[{$vo.name}] {$vo.action}</div>
                                        <small class="text-muted">{$vo.step} | {$vo.time|date="Y-m-d H:i:s",###}</small>
                                    </div>
                                </li>
                            </volist>
                            <!-- foreach end -->
                        </ul>
                        <else/>
                        <div class="no-info"></div>
                    </notempty>
                </div>

                <!-- 测试报告 -->
                <div class="layui-tab-item">
                    <notempty name="files">
                        <!-- foreach start -->
                        <volist name="files" id="file">
                            <div class="file-item">
                                <div class="file-info">
                                    <a href="" target="_blank" title="{$file.name}.{$file.ext}">
                                        <i class="file-icon file-icon-ext-{$file.ext}"></i>
                                        {$file.name}.{$file.ext}
                                    </a>
                                </div>
                            </div>
                        </volist>
                        <!-- foreach end -->
                        <else/>
                        <div class="no-info"></div>
                    </notempty>
                </div>
            </div>
        </div>
    </div>

    <!--弹出操作窗口-->
    <div class="operate">
        <form action="" class="layui-form">

            <div class="inline">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <select name="type" lay-filter="operation">
                            <option value=""></option>
                            {//检查步骤可用的标志开启对应的操作}
                            <elt name="detailResult.now_step" value="$detailResult['max_step']">
                                <option value="log">添加日志</option>
                            </elt>
                            <eq name="detailResult.now_step" value="$detailResult.max_step">
                                <option value="success">完成</option>
                            </eq>
                            <lt name="detailResult.now_step" value="$detailResult.max_step">
                                <option value="push">推送到：Step{$detailResult.next_step.id}-{$detailResult.next_step.name}</option>
                            </lt>
                            <eq name="detailResult.termination" value="Y">
                                <option value="termination">拒绝</option>
                            </eq>
                            <eq name="detailResult.rollback" value="Y">
                                <option value="rollback" >回退到：Step{$detailResult.prev_step.id}-{$detailResult.prev_step.name}</option>
                            </eq>
                            <eq name="detailResult.transfer" value="Y">
                                <option value="transfer" >转交</option>
                            </eq>
                        </select>
                    </div>
                </div>

                {//将每个步骤作用于下一步的操作的处理人遍历到下拉菜单}
                <div class="layui-form-item handle" id="operator">
                    <label class="layui-form-label">处理人</label>
                    <div class="layui-input-block">
                        <select name="operator">
                            <option value=""></option>
                            <volist name="persons" id="value">
                                <option value="{$value.id}">{$value.name}</option>
                            </volist>
                        </select>
                    </div>
                </div>

                {//如果当前步骤可以转交则加载当前人员(除去操作人)的列表}
                <present name="transfer">
                    <div class="layui-form-item handle" id="transfer">
                        <label class="layui-form-label">处理人</label>
                        <div class="layui-input-block">
                            <select name="transfer">
                                <option value=""></option>
                                <volist name="transfer" id="value">
                                    <neq name="value.id" value="$Think.session.user.id">
                                        <option value="{$value.id}">{$value.name}</option>
                                    </neq>
                                </volist>
                            </select>
                        </div>
                    </div>
                </present>

                {//如果当前步骤可以回退则加载前一步骤人员列表,如果是上一步的负责人则自动选上}
                <present name="rollback">
                    <div class="layui-form-item handle" id="rollback">
                        <label class="layui-form-label">处理人</label>
                        <div class="layui-input-block">
                            <select name="rollback">
                                <option value=""></option>
                                <volist name="rollback" id="value">
                                    <option value="{$value.id}" <eq name="value.id" value="$detailResult.manager">selected</eq>>{$value.name}</option>
                                </volist>
                            </select>
                        </div>
                    </div>
                </present>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-block">
                    <textarea name="context" class="layui-textarea" placeholder="请输入内容" lay-verify="required" ></textarea>
                </div>
            </div>

            {//如果当前步骤等于发货则加载物流信息记录操作}
            <eq name="detailResult.now_step" value="10">
                <div class="inline">
                    <div class="layui-form-item">
                        <label class="layui-form-label">物流公司</label>
                        <div class="layui-input-block">
                            <select name="logistics" >
                                <option value=""></option>
                                <volist name="logistic" id="value">
                                    <option value="{$value.id}">{$value.name}</option>
                                </volist>
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">物流单号</label>
                        <div class="layui-input-block">
                            <input type="text" name="waybill" class="layui-input" placeholder="物流单号">
                        </div>
                    </div>
                </div>
            </eq>

            <div class="inline">
                {//检测步骤是否可以修改预计交期，如果可以则显示修改交期操作栏}
                <eq name="detailResult.extension" value="Y">
                    <div class="layui-form-item">
                        <label class="layui-form-label">预计交期</label>
                        <div class="layui-input-block">
                            <input type="text" name="expected_delivery" class="layui-input" placeholder="预计交期">
                        </div>
                    </div>
                </eq>

                {//如果当前步骤等于发货则加载上传测试报告操作(暂拟)}
                <eq name="detailResult.now_step" value="10">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button type="button" class="layui-btn layui-btn-primary" id="TestReport">
                                <i class="layui-icon">&#xe67c;</i>
                                上传测试报告
                            </button>
                        </div>
                    </div>
                </eq>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">抄送给其他人</label>
                <div class="layui-input-block">
                    <select name="cc_users" xm-select="cc_users" xm-select-search xm-select-show-count="4" xm-select-search-type="title">
                        <option value="">若需将邮件抄送给其他人可选择用户，若不需要可不选择</option>
                        <volist name="ccList" id="value">
                            <option value="{$value.id}">{$value.name}</option>
                        </volist>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="text-right">
                    <button type="button" class="layui-btn" lay-submit lay-filter="submit">提交</button>
                    <button type="button" class="layui-btn layui-btn-primary cancel">取消</button>
                </div>
            </div>
        </form>
    </div>
</block>